<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="css/common.css" rel="stylesheet">
</head>
<body>
	<!--顶部-->
	<header class="header left">
	  	<div class="left nav">
	      	<ul>
	          	<li><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
	          	<li class="nav_active"><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
	          	<li><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
	          	<li ><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
			</ul>
	  	</div>
	    <div class="header_center left" style="position:relative">
	        <h2><strong>大数据展示</strong></h2>
	    </div>
	    <div class="right nav text_right"><ul></ul></div>
	</header>
	<!--内容部分-->
	<div class="con left">
	  	<!--数据总概-->
	  	<div class="con_div loadItem" data-url="data/quota_countNum.json" data-type="count">
	      	<div class="con_div_text left">
	          <div class="con_div_text01 left">
	              <img src="images/info_7.png" class="left text01_img"/>
	              <div class="left text01_div">
	                  <p>全年医疗费用(万元)</p>
	                  <p class="_count0"></p>
	              </div>
	          </div>
	          <div class="con_div_text01 right">
	              <img src="images/info_8.png" class="left text01_img"/>
	              <div class="left text01_div">
	                  <p>当月医疗费用(万元)</p>
	                  <p class="_count1"></p>
	              </div>
	          </div>
	      	</div>
	      	<div class="con_div_text left">
	          	<div class="con_div_text01 left">
	              	<img src="images/info_9.png" class="left text01_img"/>
	              	<div class="left text01_div">
	                  	<p>全年体检人数(人)</p>
	                  	<p class="sky _count2"></p>
	              	</div>
	          	</div>
	          	<div class="con_div_text01 right">
	              	<img src="images/info_10.png" class="left text01_img"/>
	              	<div class="left text01_div">
	                  	<p>当月体检人数(人)</p>
	                  	<p class="sky _count3"></p>
	              	</div>
	          	</div>
	      	</div>
	      	<div class="con_div_text left">
	
	          	<div class="con_div_text01 left">
	              	<img src="images/info_11.png" class="left text01_img"/>
	              	<div class="left text01_div">
	                  	<p>西药占比</p>
	                  	<p class="org "><span class="_count4"></span>%</p>
	              	</div>
	          	</div>
	          	<div class="con_div_text01 right">
	              	<img src="images/info_12.png" class="left text01_img"/>
	              	<div class="left text01_div">
	                  	<p>中药占比</p>
	                  	<p class="org"><span class="_count4"></span>%</p>
	              	</div>
	          	</div>
	      	</div>
		</div>
	    <!--统计分析图-->
	    <div class="div_any">
	        <div class="left div_any01">
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_5.png">各医院门诊人次(人)</div>
	                <!-- 自定义图，横向柱状占比图data-grid-style="right:40,left:120"调整左右距离data-style="notitle"不显示标题 -->
	                <p id="histogramChart1" class="p_chart loadItem" data-url="data/quota_menzhenrenci.json" data-type="extend" data-extendfn="barPercent"
	                	data-grid-style="right:40,left:120" data-style="notitle"></p>
	            </div>
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_6.png">各医院住院人次(人)</div>
	                <!-- 自定义图，横向柱状占比图data-grid-style="right:40,left:120"调整左右距离data-style="notitle"不显示标题 -->
	                <p id="histogramChart2" class="p_chart loadItem" data-url="data/quota_zhuyuanrenci.json" data-type="extend" data-extendfn="barPercent"
	                	data-grid-style="right:40,left:120" data-style="notitle"></p>
	            </div>
	        </div>
	        <div class="left div_any01">
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_7.png">各医院医疗费用(元)</div>
	                <!-- 自定义图，横向柱状占比图data-grid-style="right:40,left:120"调整左右距离data-style="notitle"不显示标题data-style="area nospace smooth nosplity"面积模式 无简析 平滑模式 无y轴分隔线 -->
	                <p id="lineChart1" class="p_chart loadItem" data-url="data/quota_yiliaofeiyong.json" data-type="line" data-style="area nospace smooth nosplity"
	                	data-legend-style="CB,color:#fff" data-grid-style="bottom:20%" data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]' data-axis-color="#fff"></p>
	            </div>
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_8.png">各医院体检人次(人)</div>
	                <!-- 自定义图，横向柱状占比图data-grid-style="right:40,left:120"调整左右距离data-style="notitle"不显示标题data-style="area nospace smooth"面积模式 无简析 平滑模式 -->
	                <p id="lineChart2" class="p_chart loadItem" data-url="data/quota_tijianrenci.json" data-type="line" data-style="area nospace smooth nosplity"
	                	data-legend-style="CB,color:#fff" data-grid-style="bottom:20%" data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]' data-axis-color="#fff"></p>
	            </div>
	        </div>
	        <div class="left div_any01">
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_9.png">药占比(%)</div>
	                <!-- 柱形图 data-bar-Width="30"柱子宽度 rotate为x轴倾斜度数 -->
	                <p id="histogramChart3" class="p_chart loadItem" data-url="data/quota_yaozhanbi.json" data-type="bar" data-bar-Width="30" data-color='#87cefa'
	                	shieldSettings="{'xAxis': {'axisLabel':{'rotate':40}}}" data-axis-color="#fff" data-style="nosplity"></p>
	            </div>
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_10.png">平均住院天数(天)</div>
	                <!-- 柱形图 data-bar-Width="30"柱子宽度 rotate为x轴倾斜度数 -->
	                <p id="histogramChart4" class="p_chart loadItem" data-url="data/quota_zhuyuantianshu.json" data-type="bar" data-bar-Width="30" data-color='#87cefa'
	                	shieldSettings="{'xAxis': {'axisLabel':{'rotate':40}}}" data-axis-color="#fff" data-style="nosplity" ></p>
	            </div>
	        </div>
	        <div class="left div_any01">
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_11.png">手术工作量(台)</div>
	                <!-- 饼状图data-rose="area"面积模式，等分弧，按半径显示多少 -->
	                <p id="pieChart1" class="p_chart loadItem" data-url="data/quota_gongzuoliang.json" data-type="pie" data-legend="[]"
	                	data-ring='[30, 110]' data-rose="area" data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]'></p>
	            </div>
	            <div class="div_any_child">
	                <div class="div_any_title"><img src="images/title_12.png">床位数量分布(床)</div>
	                 <!-- 饼状图data-rose="area"面积模式，等分弧，按半径显示多少 -->
	                <p id="pieChart2" class="p_chart loadItem" data-url="data/quota_chuangwei.json" data-type="pie" data-legend="[]"
	                	data-ring='[30, 110]' data-rose="area" data-color='["#87cefa","#ff7f50","#32cd32","#da70d6"]'></p>
	            </div>
	        </div>
	    </div>
	
	
	</div>
	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
	
</body>
</html>
